<template>
  <el-card class="weather-card" :class="{ 'is-record': isRecord }">
    <template #header v-if="weather">
      <div class="card-header">
        <h3 class="city-name">{{ weather.city }}</h3>
        <el-tag v-if="isRecord && (weather as WeatherRecord).isManual" type="info" size="small">手动记录</el-tag>
      </div>
    </template>
    
    <div v-if="weather" class="weather-content">
      <div class="weather-main">
        <div class="temperature">
          <span class="temp-value">{{ Math.round(weather.temperature) }}</span>
          <span class="temp-unit">°{{ weather.temperatureUnit }}</span>
        </div>
        
        <div class="condition">
          <i :class="`weather-icon wi wi-${getWeatherIcon(weather.icon || weather.conditionCode)}`"></i>
          <span class="condition-text">{{ weather.condition }}</span>
        </div>
      </div>
      
      <div class="weather-details">
        <div class="detail-item">
          <el-icon><el-icon-drop /></el-icon>
          <span>湿度: {{ weather.humidity }}%</span>
        </div>
        
        <div class="detail-item">
          <el-icon><el-icon-wind-power /></el-icon>
          <span>风速: {{ weather.windSpeed }} m/s</span>
        </div>
        
        <div class="detail-item" v-if="weather.windDirection">
          <el-icon><el-icon-compass /></el-icon>
          <span>风向: {{ weather.windDirection }}</span>
        </div>
        
        <div class="detail-item" v-if="weather.pressure">
          <el-icon><el-icon-dashboard /></el-icon>
          <span>气压: {{ weather.pressure }} hPa</span>
        </div>
      </div>
      
      <div v-if="weather.description" class="weather-description">
        {{ weather.description }}
      </div>
      
      <div v-if="isRecord" class="record-info">
        <el-divider />
        <div class="info-row">
          <span>记录时间: {{ formatDate((weather as WeatherRecord).createdAt) }}</span>
        </div>
        <div v-if="(weather as WeatherRecord).notes" class="info-row">
          <span>备注: {{ (weather as WeatherRecord).notes }}</span>
        </div>
      </div>
    </div>
    
    <template #footer v-if="showActions">
      <div class="card-actions">
        <el-button 
          v-if="!isRecord" 
          type="primary" 
          @click="handleSave"
          :icon="ElIconCollection"
        >
          保存记录
        </el-button>
        
        <el-button 
          v-if="isRecord" 
          type="primary" 
          text 
          @click="handleEdit"
          :icon="ElIconEdit"
        >
          编辑
        </el-button>
        
        <el-button 
          v-if="isRecord" 
          type="danger" 
          text 
          @click="handleDelete"
          :icon="ElIconDelete"
        >
          删除
        </el-button>
        
        <el-button 
          text 
          @click="handleShare"
          :icon="ElIconShare"
        >
          分享
        </el-button>
      </div>
    </template>
  </el-card>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { 
  ElCard, 
  ElTag, 
  ElButton, 
  ElIcon, 
  ElDivider,
  ElMessageBox,
  ElMessage
} from 'element-plus'
import {
  Collection as ElIconCollection,
  Edit as ElIconEdit,
  Delete as ElIconDelete,
  Share as ElIconShare,
  Drizzling as ElIconDrop,
  WindPower as ElIconWindPower,
  Position as ElIconCompass,
  Odometer as ElIconDashboard
} from '@element-plus/icons-vue'
import type { Weather, WeatherRecord } from '@/types'
import { useRecordsStore } from '@/stores/records'

// Props
const props = defineProps({
  weather: {
    type: Object as PropType<Weather | WeatherRecord | null>,
    required: true
  },
  showActions: {
    type: Boolean,
    default: true
  }
})

// Emits
const emit = defineEmits<{
  save: []
  edit: [record: WeatherRecord]
  delete: [id: string]
  share: [weather: Weather | WeatherRecord]
}>()

// Store
const recordsStore = useRecordsStore()

// 判断是否为记录
const isRecord = computed(() => {
  return props.weather && 'recordId' in props.weather
})

// 获取天气图标
const getWeatherIcon = (iconCode: string): string => {
  // 根据图标代码返回对应的weather-icons类名
  const iconMap: Record<string, string> = {
    '01d': 'day-sunny',
    '01n': 'night-clear',
    '02d': 'day-cloudy',
    '02n': 'night-alt-cloudy',
    '03d': 'cloud',
    '03n': 'cloud',
    '04d': 'cloudy',
    '04n': 'cloudy',
    '09d': 'showers',
    '09n': 'showers',
    '10d': 'day-rain',
    '10n': 'night-rain',
    '11d': 'thunderstorm',
    '11n': 'thunderstorm',
    '13d': 'snow',
    '13n': 'snow',
    '50d': 'fog',
    '50n': 'fog'
  }
  
  return iconMap[iconCode] || 'na'
}

// 格式化日期
const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

// 保存记录
const handleSave = () => {
  emit('save')
}

// 编辑记录
const handleEdit = () => {
  if (isRecord.value && props.weather) {
    emit('edit', props.weather as WeatherRecord)
  }
}

// 删除记录
const handleDelete = async () => {
  if (!isRecord.value || !props.weather) return
  
  try {
    await ElMessageBox.confirm(
      '确定要删除这条记录吗？',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const record = props.weather as WeatherRecord
    recordsStore.deleteRecord(record.recordId)
    emit('delete', record.recordId)
  } catch {
    // 用户取消
  }
}

// 分享天气
const handleShare = () => {
  if (!props.weather) return
  
  const shareText = `${props.weather.city}天气：${props.weather.condition}，温度${props.weather.temperature}°${props.weather.temperatureUnit}，湿度${props.weather.humidity}%`
  
  if (navigator.share) {
    navigator.share({
      title: '天气分享',
      text: shareText,
      url: window.location.href
    }).catch(err => console.log('分享失败:', err))
  } else {
    // 复制到剪贴板
    navigator.clipboard.writeText(shareText).then(() => {
      ElMessage.success('已复制到剪贴板')
    })
  }
  
  emit('share', props.weather)
}
</script>

<style lang="scss" scoped>
.weather-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  &.is-record {
    border-left: 3px solid var(--el-color-primary);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .city-name {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }
  }
  
  .weather-content {
    .weather-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .temperature {
        display: flex;
        align-items: baseline;
        
        .temp-value {
          font-size: 48px;
          font-weight: 300;
          line-height: 1;
        }
        
        .temp-unit {
          font-size: 24px;
          margin-left: 4px;
          color: var(--el-text-color-secondary);
        }
      }
      
      .condition {
        text-align: center;
        
        .weather-icon {
          font-size: 48px;
          color: var(--el-color-primary);
          display: block;
          margin-bottom: 8px;
        }
        
        .condition-text {
          font-size: 16px;
          color: var(--el-text-color-regular);
        }
      }
    }
    
    .weather-details {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 16px;
      
      .detail-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--el-text-color-regular);
        
        .el-icon {
          color: var(--el-color-primary);
        }
      }
    }
    
    .weather-description {
      padding: 12px;
      background: var(--el-fill-color-light);
      border-radius: 4px;
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
    
    .record-info {
      .info-row {
        font-size: 13px;
        color: var(--el-text-color-secondary);
        margin-bottom: 4px;
      }
    }
  }
  
  .card-actions {
    display: flex;
    justify-content: space-between;
    
    .el-button {
      flex: 1;
    }
  }
}

// 深色模式适配
.dark {
  .weather-card {
    background: var(--el-bg-color);
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .weather-card {
    .weather-content {
      .weather-main {
        .temperature {
          .temp-value {
            font-size: 36px;
          }
          
          .temp-unit {
            font-size: 20px;
          }
        }
        
        .condition {
          .weather-icon {
            font-size: 36px;
          }
        }
      }
      
      .weather-details {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style> 